<!doctype html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>Pen - What You See Is What You Get (WYSIWYG)</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        html {
            border-top: 10px #20191b solid;
        }

        body {
            width: 800px;
            margin: 0 auto;
            padding: 5% 20px 20px;
            font-family: Palatino, Optima, Georgia, serif;
        }

        @media all and (max-width:1024px) {

            body,
            pre a {
                width: 60%;
            }
        }

        small {
            color: #999;
        }

        pre {
            white-space: pre-wrap;
        }

        #toolbar {
            margin-bottom: 1em;
            position: fixed;
            left: 20px;
            margin-top: 5px;
        }

        #toolbar [class^="icon-"]:before,
        #toolbar [class*=" icon-"]:before {
            font-family: 'pen'
        }

        #mode {
            color: #1abf89;
            ;
            cursor: pointer;
        }

        #mode.disabled {
            color: #666;
        }

        #mode:before {
            content: '\e813';
        }

        #hinted {
            color: #1abf89;
            cursor: pointer;
        }

        #hinted.disabled {
            color: #666;
        }

        #hinted:before {
            content: '\e816';
        }

        #tomd {
            color: #fff;
            border-radius: 2px;
            line-height: 1;
            padding: 1px 3px 0;
            font-size: 0.8em;
            background: #000;
            cursor: pointer;
        }

        #fork {
            position: fixed;
            right: 0;
            top: 0;
        }

        /*
  When the webpage is printed
  this media query hides extra elements,
  and makes the text content fit the page.
  */
        @media print {

            #fork,
            #toolbar {
                display: none;
            }

            body {
                width: 94%;
                padding-top: 1em;
                font-size: 12px;
            }

            html {
                border-top: 0;
            }
        }
    </style>
    <link rel="stylesheet" href="src/pen.css" />
</head>

<body>

    <div id="toolbar">
        <span id="mode" class="icon-mode"></span>
        <span id="hinted" class="icon-pre disabled" title="Toggle Markdown Hints"></span>
        <span id="tomd" title="to markdown">MD</span>
    </div>

    <!-- <div id="custom-toolbar" class="pen-menu pen-menu" style="display: block; top: 20px; left: 10px;">
  <i class="pen-icon icon-insertimage" data-action="insertimage"></i>
  <i class="pen-icon icon-blockquote" data-action="blockquote"></i>
  <i class="pen-icon icon-h2" data-action="h2"></i>
  <i class="pen-icon icon-h3" data-action="h3"></i>
  <i class="pen-icon icon-p active" data-action="p"></i>
  <i class="pen-icon icon-code" data-action="code"></i>
  <i class="pen-icon icon-insertorderedlist" data-action="insertorderedlist"></i>
  <i class="pen-icon icon-insertunorderedlist" data-action="insertunorderedlist"></i>
  <i class="pen-icon icon-inserthorizontalrule" data-action="inserthorizontalrule"></i>
  <i class="pen-icon icon-indent" data-action="indent"></i>
  <i class="pen-icon icon-outdent" data-action="outdent"></i>
  <i class="pen-icon icon-bold" data-action="bold"></i>
  <i class="pen-icon icon-italic" data-action="italic"></i>
  <i class="pen-icon icon-underline" data-action="underline"></i>
  <i class="pen-icon icon-createlink" data-action="createlink"></i>
</div> -->

    <div data-toggle="pen" data-placeholder="im a placeholder">
        <h2>Enjoy live editing (+markdown 测试)</h2>

        <p><b><i>Click anywhere to start editing, select and click items on the popup toolbar to toggle effects.</i></b>
        </p>
        <hr>
        <p>Horizontal-Rule can be inserted by click「...」on the toolbar or just type「... 」/「--- 」/「*** 」at the start of a
            line.
            Note, the shorthand command should be followed by a SPACE to enable the convert, otherwise, they will just
            stay what
            they look like.</p>
        <p><img src="https://files.slack.com/files-pri/T02SY1UGK-F02UKR9HH/61fecdffjw1em2euxugtdg208w06okjm.gif"
                alt="oh my god" /></p>
        <hr>
        <p>To add a link, please type your URL into the input field and hit <i>ENTER/RETURN</i> key. And, a <a
                href="/sofish">link</a>
            can be removed by clearing up the input field.

        <p>
        <ul>
            <li>Ordered list and unordered list are supported.</li>
            <li>Use the toolbar or markdown syntax like「<b>1. </b>」,「<b>- </b>」or「<b>* </b>」</li>
        </ul>
        <blockquote>You can quote texts by typing「<b>&gt;</b>」at the start of a line.</blockquote>
        <p>What about add underline to texts? "<u>Stay Hungry, Stay Foolish - <i>Steve Jobs</i></u>".</p>
        <pre>Code block is also supported by typing 「```」 at the start of a line, don't forget the trailing SPACE.</pre>
        <p>For more detail, please check out: <a href="https://github.com/sofish/pen#readme"
                target="_blank">https://github.com/sofish/pen#readme</a>
        </p>
    </div>



    <script src="src/pen.js"></script>
    <script src="src/markdown.js"></script>
    <script type="text/javascript">

        // config
        var options = {
            // toolbar: document.getElementById('custom-toolbar'),
            editor: document.querySelector('[data-toggle="pen"]'),
            debug: true,
            list: [
                'insertimage', 'blockquote', 'h2', 'h3', 'p', 'code', 'insertorderedlist', 'insertunorderedlist', 'inserthorizontalrule',
                'indent', 'outdent', 'bold', 'italic', 'underline', 'createlink'
            ]
        };

        // create editor
        var pen = window.pen = new Pen(options);

        pen.focus();

        // toggle editor mode
        document.querySelector('#mode').addEventListener('click', function () {
            var text = this.textContent;

            if (this.classList.contains('disabled')) {
                this.classList.remove('disabled');
                pen.rebuild();
            } else {
                this.classList.add('disabled');
                pen.destroy();
            }
        });

        // export content as markdown
        document.querySelector('#tomd').addEventListener('click', function () {
            var text = pen.toMd();
            document.body.innerHTML = '<a href="javascript:location.reload()">&larr;back to editor</a><br><br><pre>' + text + '</pre>';
        });

        // toggle editor mode
        document.querySelector('#hinted').addEventListener('click', function () {
            var pen = document.querySelector('.pen')

            if (pen.classList.contains('hinted')) {
                pen.classList.remove('hinted');
                this.classList.add('disabled');
            } else {
                pen.classList.add('hinted');
                this.classList.remove('disabled');
            }
        });
    </script>
</body>

</html>